<template>
  <!-- <div class="container" style="width: 100%; height: 100%;"> -->
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span class="active">角色管理</span>
    </div>

    <el-row>
      <el-col :span="24">
        <span>关键字：</span>
        <el-input class="searchInp" placeholder="请输入内容" v-model="query.key"></el-input>
        <el-button type="primary" class="searchbtn" size="small" @click="search">查询</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="btns">
      <el-button v-if="power.includes('添加角色')" type="success" class="searchbtn" size="small"
        @click="dialogVisible = true">添加</el-button>
      <el-button type="primary" class="searchbtn ico" size="small">批量删除</el-button>
    </el-row>

    <!--  表格 -->

    <BaseTable :tableColumn="tableColumn" :tableData="tableData" :loading="loading">
      <template #options="{ row }">
        <el-button v-if="power.includes('修改角色')" size="small" @click="handleEdit(row)" type="success">修改</el-button>
        <el-button v-if="power.includes('删除角色')" size="small" @click="handleDelete(row)" type="danger">删除</el-button>
      </template>
    </BaseTable>

    <!-- 分页 -->
    <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="query.page" :page-sizes="[5, 10, 20, 50]" :page-size="query.psize"
      layout="total, sizes, prev, pager, next, jumper" :total="counts">
    </el-pagination>
    <DialogRole :dialogVisible="dialogVisible" :isEdit="isEdit" :editData="editData" @handleCancel="handleCancel"
      @refreshList="refreshList"></DialogRole>
  </el-card>
  <!-- </div> -->
</template>

<script>
import { administratorrolelist, administratorroledelete } from "../api/administrator";
import BaseTable from "@/components/BaseTable.vue";
import DialogRole from "@/components/DialogRole.vue";
import { miXinPower } from "@/utils/miXinPower.js";

// import {list,del} from "../api/role";
export default {
  name: "NewsView",
  components: {
    BaseTable,
    DialogRole,
  },
  mixins: [miXinPower],
  data() {
    return {
      dialogVisible: false,
      loading: true,
      query: {
        page: 1,
        psize: 5,
        key: "",
        type: "",
      },
      counts: 0,
      tableColumn: [
        {
          prop: "id",
          label: "ID",
          width: 580,
        },
        {
          prop: "name",
          label: "角色名称",
          width: 580,
        },
        {
          prop: "options",
          label: "操作",
          slotname: "options",
        },
      ],
      gridData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",

      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      formInline: {
        user: "",
        region: "",
      },
      tableData: [],
      multipleSelection: [],
      isEdit: false,
      editData: {},
    };
  },

  methods: {
    isHavePower() {
      const path = this.$route.path;
      const power = this.$store.getters.getPower(path);
      this.power = power.map((item) => item.name);
      console.log("power", this.power);
    },
    refreshList() {
      this.isEdit = false;
      this.dialogVisible = false;
      this.getList();
    },
    handleCancel(dialogVisible) {
      this.isEdit = false;
      this.dialogVisible = dialogVisible;
    },
    handleClick(row) {
      console.log("编辑操作:", row);
      // 这里可以添加编辑逻辑
    },
    async handleDelete(row) {
      try {
        await this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        await administratorroledelete({ id: row.id });
        await this.getList();
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      } catch (error) {
        if (error === "cancel") {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        } else {
          console.error("删除失败:", error);
        }
      }
    },

    async getList() {
      this.loading = true;
      try {
        let {
          data: { counts, list: listData },
        } = await administratorrolelist(this.query);
        this.counts = counts;
        this.tableData = listData;
        this.loading = false;
        console.log("获取到的数据:", listData);
      } catch (error) {
        console.error("获取数据失败:", error);
      }
    },
    onSubmit() {
      console.log("查询表单提交:", this.formInline);
      // 这里可以添加实际的查询逻辑
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log("选中项发生变化:", val);
    },
    handleEdit(row) {
      this.dialogVisible = true;
      this.editData = row;
      this.isEdit = true;
      // 这里可以添加编辑逻辑
    },
    handleSizeChange(val) {
      this.query.psize = val;
      this.query.page = 1; // 重置到第一页
      this.getList();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getList();
    },
    search() {
      this.query.page = 1;
      this.getList();
    },
  },

  created() {
    this.isHavePower();
    this.getList();
  },
};
</script>

<style lang="less" scoped>
@import url(../assets/css/search.less);

.ico {
  background-color: red;
}
</style>
